<template>
  <div id="app">
    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="jobyin(),type='工作流引擎'">工作流引擎</el-button>
      <el-button type="primary" @click="addVisible=true">工作流设计器</el-button>
      <el-button type="primary" @click="type='表单模板',biaodan()">表单模板</el-button>
      <el-button type="primary" @click="addFormVisible=true">表单设计器</el-button>
      <el-button type="primary" @click="type='报表模板',baobiao()">报表模板</el-button>
      <el-button type="primary" @click="addReportVisible=true">报表设计器</el-button>
    </div>
    <el-table v-if="type=='工作流引擎'" :data="tableData" border fit stripe highlight-current-row>
      <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center" />
    </el-table>
    <el-table v-if="type=='表单模板'" :data="tableData1" border fit stripe highlight-current-row>
      <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
        align="center" />
    </el-table>
    <el-table v-if="type=='报表模板'" :data="tableData2" border fit stripe highlight-current-row>
      <el-table-column v-for="item in tableHead2" :key="item.id" :label="item.label" :prop="item.title"
        align="center" />
    </el-table>
    <el-dialog title="工作流设计器" :close-on-click-modal="false" :visible.sync="addVisible" width="30%">
      <add :close="close" :jobyin="jobyin" :changeText="changeText" />
    </el-dialog>
    <el-dialog title="表单设计" :close-on-click-modal="false" :visible.sync="addFormVisible" width="30%">
      <addForm :close="close" :biaodan="biaodan" :changeText="changeText" />
    </el-dialog>
    <el-dialog title="报表设计" :close-on-click-modal="false" :visible.sync="addReportVisible" width="30%">
      <addReport :close="close" :baobiao="baobiao" :changeText="changeText" />
    </el-dialog>
  </div>
</template>

<script>
  import add from "./components/add.vue"
  import addForm from "./components/addForm.vue"
  import addReport from "./components/addReport.vue"
  export default {
    components: {
      add,
      addForm,
      addReport
    },
    data() {
      return {
        type: '工作流引擎',
        tableData: [],
        tableHead: [{
            id: 1,
            label: "流程名称",
            title: "name",
          },
          {
            id: 2,
            label: "关键字",
            title: "Keyword",
          },
          {
            id: 3,
            label: "URL",
            title: "url",
          },
          {
            id: 4,
            label: "事件Bean",
            title: "method",
          },
          {
            id: 5,
            label: "分类ID",
            title: "type",
          },
          {
            id: 6,
            label: "生效日期",
            title: "time",
          },
          {
            id: 7,
            label: "描述",
            title: "message",
          },
        ],
        addVisible: false,
        addFormVisible: false,
        addReportVisible: false,
        tableHead1: [{
            id: 1,
            label: "名称",
            title: "name",
          },
          {
            id: 2,
            label: "程序键",
            title: "Keyword",
          },
          {
            id: 3,
            label: "类型",
            title: "type",
          },
          {
            id: 4,
            label: "前端显示",
            title: "webshow",
          },
          {
            id: 5,
            label: "ACL规则数",
            title: "acl",
          },
          {
            id: 6,
            label: "排序",
            title: "sort",
          }
        ],
        tableData1: [],
        tableHead2: [{
            id: 1,
            label: "申请人",
            title: "user",
          },
          {
            id: 2,
            label: "开票主体方",
            title: "subjectSide",
          },
          {
            id: 3,
            label: "开票名称",
            title: "title",
          },
          {
            id: 4,
            label: "合同编码",
            title: "coding",
          },
          {
            id: 5,
            label: "发票类型",
            title: "type",
          },
          {
            id: 6,
            label: "开票金额",
            title: "Invoicing",
          }
        ],
        tableData2: []
      }
    },
    methods: {
      jobyin() {
        this.$server.enginelist({}).then((res) => {
          console.log(res)
          this.tableData = res.page.list
        })
        // this.tableData = [{
        //   name: '物品盘点',
        //   Keyword: '盘点',
        //   url: '/sys/Keyword',
        //   method: '清点',
        //   type: '1',
        //   time: '2021-10-22',
        //   message: '清点公司财产'
        // }, ]
      },
      close() {
        this.addVisible = false
        this.addFormVisible = false
        this.addReportVisible = false
      },
      biaodan() {
        this.$server.formlist({}).then((res) => {
          this.tableData1 = res.page.list
        })
      },
      changeText(item) {
        this.type = item
      },
      baobiao() {
        this.$server.statement({}).then((res) => {
          this.tableData2 = res.page.list
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  #app {
    padding: 30px;
  }
</style>
